<!DOCTYPE html>
<html lang="zh">
<head>
    #@header()
    #set(isAdd = menu == null ? true : false, isEdit = !isAdd)
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-role-add">

        #if(isEdit)
        <div class="form-group">
            <label class="col-sm-3 control-label">ID：</label>
            <div class="col-sm-8">
                <input name="id" class="form-control" id="userId" value="#(menu.id??)" disabled>
            </div>
        </div>
        #end

        <div class="form-group">
            <label class="col-sm-3 control-label">父级菜单：</label>
            <div class="col-sm-8">
                <select class="form-control noselect2 selectpicker" name="pid">
                    <option value="0">--父菜单--</option>
                    #for(x : menus)
                    <option value="#(x.id)" #if(menu != null && x.id == menu.pid) selected #end>#(x.name)</option>
                    #end
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">菜单名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="name" id="name" value="#(menu.name??)" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">菜单链接：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="link" id="link" value="#(menu.link??)" required>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label">icon图标：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="icon" id="icon" value="#(menu.icon??)" autocomplete="off" required>
                <span style="color: red">动图：fa-spin fa fa-图标 </br>静图：fa fa-图标</span>
                <br>
                <li id="iconShow" class=""></li>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">操作权限：</label>
            <div class="col-sm-9">
                #for(x : operates)
                <label class="checkbox-inline">
                    <input type="checkbox" value="#(x.id)" #if(menu != null && x.active == 1) checked #end name="operate_ids">#(x.name??)</label>
                #end
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label">排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="number" name="sort" id="sort" value="#(menu.sort??0)" required>
            </div>
        </div>

    </form>
</div>
#@footer()
<script type="text/javascript">
    $("#form-role-add").validate({
        rules: {
            name: {
                required: true,
                maxlength: 20,
                remote: {
                    url: "#(prj)/admin/menu/nameUnique",
                    type: "get",
                    dataType: "json",
                    data: {
                        "id": function() {
                            return $("#userId").val();
                        },
                        "name": function() {
                            return $("input[name='name']").val();
                        }
                    },
                    dataFilter: function (data, type) {
                        var res = JSON.parse(data);
                        if(res.state == 'ok'){
                            return true
                        }else{
                            return false
                        }
                    }
                }
            },

            onkeyup: true,

        },
        messages: {
            "name": {
                remote: "名称重复"
            },
        },
        focusCleanup: true
    });
    var uurl = "";
    #if(isAdd)
        uurl = "#(prj)/admin/menu/save";
    #else
    uurl = "#(prj)/admin/menu/update";
    #end

    function submitHandler() {
        if ($.validate.form()) {
            #(isAdd ? 'add()' : 'edit()')
        }
    }

    function #(isAdd ? 'add()' : 'edit()') {


        var operateIds = "";
        $("input[name='operate_ids']:checked").each(function () {
            operateIds += $(this).val()+",";
        })

        if(operateIds.length > 0){
            operateIds = operateIds.substring(0,operateIds.lastIndexOf(","));
        }

        var formData = new FormData();
        formData.append("menu.pid",$("select[name='pid']").val())
        formData.append("menu.name",$("input[name='name']").val())

        formData.append("menu.link",$("input[name='link']").val())
        formData.append("menu.icon",$("input[name='icon']").val())
        formData.append("menu.operate_ids",operateIds)
        formData.append("menu.sort",$("input[name='sort']").val())


        #if(isEdit)
                formData.append("menu.id", $("input[name='id']").val())
        #end

        $.ajax({
            url:uurl,
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.operate.successCallbackTreeTableMsg(data.msg);
            }
        });
    }


    $(function(){
        iconShow($("#icon").val())
    })
    function iconShow(v){
        $("#iconShow").attr("class",v)
    }
    $("#icon").keyup(function () {
        iconShow($(this).val())
    })
</script>
</body>
</html>
